<template>
  <div class="one" ref="box">
    <div>
      <span class="left" @click="prev">
        <i class="el-icon-arrow-left"></i
      ></span>
      <slot></slot>
      <span class="right" @click="next"
        ><i class="el-icon-arrow-right"></i
      ></span>
    </div>
    <ul>
      <li v-for="item in num" :key="item"></li>
    </ul>
  </div>
</template>
<script>
export default {
  inject: ['num'],
  name: '',
  data () {
    return {
      index: 0
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    prev () {
      console.log(1);
      console.log(this.$refs.box);
      this.$refs.box.style.transform = "translateX(-800px)"

    },
    next () {
      console.log(2);
    }
  }
}
</script>
<style lang='less'  scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.one {
  position: relative;
  margin: 0 auto;
  background-color: #ccc;
  height: 100%;
  transition: all 2s;
  ul {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    li {
      width: 15px;
      height: 5px;
      background-color: #fff;
      margin-right: 10px;
    }
  }
  .left,
  .right {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #bfc9d4;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    opacity: 0;
    transition: all 0.6s;
    cursor: pointer;
  }
  .left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
  }
  .right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
  }
}
.one:hover {
  .left,
  .right {
    opacity: 1;
  }
}

.one:nth-child(2n) {
  background-color: red;
}

.one:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
